<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<!--

	-
	Lovely CSS - A CSS framework by Constantinos Demetriadis
	-
	URL:			www.ohmylovely.com/css-framework/
	Description:	Example template
	Author:			Constantinos M. Demetriadis
    -
	SVN Repository Info
	$Id: example.html 193 2009-02-23 17:26:41Z cdemetriadis $
	$URL: http://lovely-css.googlecode.com/svn/tags/version-0.9.2/example.html $
	-

-->

	<title>Lovely CSS Framework</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="Constantinos Demetriadis" />
	<meta name="url" content="http://www.example.com" />
	<meta name="keywords" content="Keywords" />
	<meta name="description" content="Description" />
	<meta name="copyright" content="Copyright" />
	<meta name="robots" content="ALL" />

	<link rel="shortcut icon" href="favicon.png" />

    <!-- Google AJAX Libraries
         jQuery: http://code.google.com/apis/ajaxlibs/ -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js" type="text/javascript"></script>
    
    <!-- jQuery plugins
         SWFObject: http://jquery.thewikies.com/swfobject/ -->
	<script src="lovely-css/_js/jquery.swfobject.min.js" type="text/javascript"></script>

    <!-- jQuery plugins
         SIFR: http://jquery.thewikies.com/sifr/ -->
	<script src="lovely-css/_js/jquery.sifr.min.js" type="text/javascript"></script>
    
	<style type="text/css" media="screen">
        @import url("_base.css");
        @import url("_tpl.screen.example.css"); /* Used for DEMO purposes only */
        @import url("lovely-css/plug-ins/plg.development.css"); /* Development Module */
	</style>

	<style type="text/css" media="print">@import url("_tpl.print.css");</style>
	<!--[if IE 7]><style type="text/css">@import url("_inc.ie7-fix.css");</style><![endif]-->
    <!--[if lt IE 7]><style type="text/css">@import "_inc.ie-fix.css";</style><![endif]-->

</head>
<body>

<div class="gridContainer">

    <div class="grid-development"></div>

	<div id="gridExample">

		<div class="grid-sixteen"><h1>16 Column Grid Demonstration</h1></div>
		<div class="grid-sixteen"><p>Each box contains the class name according to the Lovely CSS Framework.</p></div>

		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-two"><span>grid-two</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-three"><span>grid-three</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-four"><span>grid-four</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-five"><span>grid-five</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-six"><span>grid-six</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-seven"><span>grid-seven</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-eight"><span>grid-eight</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-nine"><span>grid-nine</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-ten"><span>grid-ten</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-eleven"><span>grid-eleven</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-twelve"><span>grid-twelve</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-thirteen"><span>grid-thirteen</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-fourteen"><span>grid-fourteen</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-fifteen"><span>grid-fifteen</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-sixteen"><span>grid-sixteen</span></div>

		<div class="grid-sixteen"><h1>16 Column Grid Mix 'n' Match Demonstration</h1></div>
		<div class="grid-sixteen"><p>Just freaking out with the grid columns.</p></div>

		<div class="grid-four"><span>grid-four</span></div>
		<div class="grid-eight"><span>grid-eight</span></div>
		<div class="grid-four"><span>grid-four</span></div>

		<div class="grid-eight"><span>grid-eight</span></div>
		<div class="grid-four"><span>grid-four</span></div>
		<div class="grid-four"><span>grid-four</span></div>

		<div class="grid-six"><span>grid-six</span></div>
		<div class="grid-eight"><span>grid-eight</span></div>
		<div class="grid-two"><span>grid-two</span></div>

		<div class="clear"></div>

	</div>

	<div id="htmlReset">

		<div class="grid-sixteen"><h1>Master HTML Reset &amp; Font Setup</h1></div>
		<div class="grid-sixteen"><p>This is the default appearance of HTML elements when using the Lovely CSS Framework.</p></div>
        
		<h1>h1</h1>
		<h2>h2</h2>
		<h3>h3</h3>
		<h4>h3</h4>
		<h5>h3</h5>
		<h6>h3</h6>

        <hr />

		<p>This is a paragraph with a <a href="#">link</a></p>
		
        <hr />
		
		<p>this is a paragraph with an Inline image <a href="#" title="Inline image"><img src="_assets/chart_pie.png" alt="Inline image" width="16" height="16" /></a></p>
		
        <hr />

        <blockquote><p>This is a blockquote</p></blockquote>

        <hr />

		<pre>This is some block with pre</pre>

        <hr />

		<code>This is some block with code</code>

        <hr />
		
		<table summary="Dummy Table">
			<caption>Table Caption</caption>
            <thead>
                <tr>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Data</th>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data Data Data Data Data</td>
                    <td>Data</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Data Data</th>
                    <td>Data</td>
                    <td>Data Data Data Data Data</td>
                    <td>Data</td>				
                    <td>Data</td>
                </tr>
            </tfoot>
		</table>
		
        <hr />
		
		<ul>
			<li>ul list #1</li>
			<li>ul list #2</li>
		</ul>
		
        <hr />
		
		<ol>
			<li>ol list #1</li>
			<li>ol list #2</li>
		</ol>
		
        <hr />
		
		<dl>
			<dt>dt</dt>
			<dd>dd</dd>
		</dl>
		
        <hr />

		<div class="clear"></div>
        
	</div>

	<div class="clear"></div>

</div>

<div class="clear"></div>

</body>

</html>